import { Button, Descriptions, Row, Col, Modal, message } from "antd";
import { DownloadOutlined } from '@ant-design/icons';
import {
  EyeOutlined,
  CloudDownloadOutlined,
  CloudServerOutlined,
  SlackOutlined
} from "@ant-design/icons";
import React from "react";
import Chart from "../../components/Chart";
import { ReadingIncrement } from "./echarts";
import styles from "./detail.less";
import icon from "../../assets/images/admob.png";
import { connect } from "dva";
import { routerRedux } from "dva/router";

const imgBaseUrl = "http://21.108.153.117:8001";

@connect(({ global }) => ({ userId: global.userId }))
class DataAssetsDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      associationMessage: [],
      hotWordVos: {},
      articleList: {},
      newList: [],
      isModalVisible: false,
      id: this.props.match.params.id,
      key: "",
      titleFirst: "",
      serviceId: "",
      fileUrl: "",
    };
  }



  componentDidMount() {
    console.log(this.props);
    this.queryDataDetail()
    //数据资产列表
    this.props.dispatch({
      type: "global/queryDataAsset",
      payload: {
        userId: this.props.userId ? this.props.userId : "",
        text: "",
        startTime: "",
        endTime: "",
        subjects: "",
        sources: "",
        format: "",
        scope: "",
        pageNum: 1,
        pageSize: 10,
        sort: "",
      }
    }).then(res => {
      if (res) {
        this.setState({
          newList: res.data.rows
        })
      }
    })
  }
  getQueryAssociation = () => {
    //数据关联接口
    this.props.dispatch({
      type: "global/queryAssociation",
      payload: {
        id: this.state.id
      }
    }).then(res => {
      this.setState({
        associationMessage: [this.state.articleList, ...res.data]
      })
    })
  }

  //数据资产详情查看
  queryDataDetail = () => {
    let { id } = this.state;
    this.props.dispatch({
      type: "global/queryDataDetail",
      payload: {
        id: id
      }
    }).then(res => {
      if (res) {
        this.setState({
          articleList: res.data,
          titleFirst: res.data.title ? res.data.title.charAt(0) : "",
          serviceId: res.data.serviceId,
          fileUrl: res.data.fileUrl
        }, () => {
          this.getQueryAssociation()
        });
      }
    })
  }
  //最新资源发布跳转

  handleToDetaile = id => {
    this.setState({ id: id }, () => {
      this.queryDataDetail();
    });
  };

  //授权弹框
  showModal = () => {
    this.setState({
      isModalVisible: true,
    });

  };

  //弹框确定按钮
  handleOk = () => {
    this.setState({
      isModalVisible: false
    });
  };
  //弹框取消按钮
  handleCancel = () => {
    this.setState({
      isModalVisible: false
    });
  };
  //关联图点击事件
  onChartClick = (e) => {
    console.log("click in", e);
    this.setState({
      id: e.data.key
    }, () => {
      this.queryDataDetail()
    })
  }

  //下载附件
  download = () => {

    let { fileUrl } = this.state
    console.log(fileUrl)
    // let link = window.document.createElement('a');
    // link.style.display = 'none';
    // link.href = fileUrl;
    // window.ducument.body.appendChild(link);
    // link.click();
    if (fileUrl !== "") {
      this.props.dispatch({
        type: "global/downloadN",
        payload: {
          path: `${fileUrl}`
        }
      })
        .then(blob => {
          console.log(blob)
          let filename = fileUrl.split("/")[fileUrl.split("/").length - 1]
          const link = document.createElement('a')
          link.download = filename
          link.style.display = 'none'
          // link.href = URL.createObjectURL(blob)
          link.href = fileUrl
          document.body.appendChild(link)
          link.click()
          // URL.revokeObjectURL(link.href)
          document.body.removeChild(link)

        });
    } else {
      message.error("下载资源不存在");
    }
  };
  render() {
    const { isModalVisible, titleFirst, serviceId, fileUrl } = this.state;

    return (
      <div className={styles.content}>
        <div className={styles.bannerBox}>
          <div className={styles.bannerTitle}>
            <p>科研数据</p>
            <p>Scientific research data</p>
          </div>
        </div>
        <div className={styles.detailBox}>
          <div className={styles.detailHead}>
            <div className={styles.clearfix}>
              <div style={{ width: "100%" }}>
                <div className={styles.fl} style={{ width: "120px" }}>
                  <div className={styles.descriptionsIcon}>
                    {this.state.articleList.logo ? (
                      <img
                        src={this.state.articleList.logo}
                        alt=""
                      />
                    ) : (
                      <div> {titleFirst}</div>
                    )}
                  </div>

                </div>
                <div className={styles.fl}>
                  <div style={{ float: "left" }}>
                    <p className={styles.bigTitle}>
                      {" "}
                      {this.state.articleList.title}
                    </p>
                    <p className={styles.littleTitle}>{this.state.articleList.subTitle}</p>
                  </div>
                </div>
              </div>
              {/* <div style={{ float: "right", margin: "50px 50px 0 0" }}>

              </div> */}
              <div>
                <div
                  className={styles.detailHeadBottom}
                  style={{ float: "left", marginLeft: "130px" }}
                >
                  <Row>
                    <Col span={3}>
                      <p>
                        <EyeOutlined />
                        <span>访问量</span>
                        <span className={styles.num}>{this.state.articleList.visitNum}</span>
                      </p>
                    </Col>
                    <Col span={3}>
                      <p>
                        <CloudServerOutlined />
                        <span>收藏量</span>
                        <span className={styles.num}>{this.state.articleList.collections}</span>
                      </p>
                    </Col>
                    <Col span={3}>
                      <p>
                        <CloudDownloadOutlined />
                        <span>下载量</span>
                        <span className={styles.num}>{this.state.articleList.usedNum}</span>
                      </p>
                    </Col>
                    <Col span={3}>
                      <p>
                        {fileUrl ? <Button type="plain" icon={<DownloadOutlined />}
                          onClick={this.download}>
                          下载附件
                        </Button> : <Button type="plain" disabled icon={<DownloadOutlined />}
                          onClick={this.download}>
                          下载附件
                        </Button>}
                      </p>
                    </Col>
                    <Col span={3}>
                        <p><Button
                        type="default"
                        icon={<SlackOutlined />}
                        onClick={this.showModal}
                        style={{ color: "#00B5C1", borderColor: "#00B5C1" }}
                      >
                        授权使用
                      </Button></p>
                    </Col>
                  </Row>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.detailBody}>
            <div className={styles.clearfix}>
              <div className={styles.fl} style={{ width: "75%" }}>
                <div className={styles.detailBodyLeft}>
                  <Descriptions column={2}>
                    <Descriptions.Item label="关键词" >
                      {this.state.articleList.keyWords}
                    </Descriptions.Item>
                    <Descriptions.Item label="数据来源">
                      {this.state.articleList.dataOrigin}
                    </Descriptions.Item>
                    <Descriptions.Item label="使用范围">
                      {this.state.articleList.useScopeName}
                    </Descriptions.Item>
                    <Descriptions.Item label="所属科目">
                      {this.state.articleList.subjectsName}
                    </Descriptions.Item>
                    <Descriptions.Item label="资源发布者">
                      {this.state.articleList.publisher}
                    </Descriptions.Item>
                    <Descriptions.Item label="资源所属部门">
                      {this.state.articleList.department}
                    </Descriptions.Item>
                    <Descriptions.Item label="资源大小">
                      {this.state.articleList.size}
                    </Descriptions.Item>
                    <Descriptions.Item label="使用量">
                      {this.state.articleList.usedNum}
                    </Descriptions.Item>

                    <Descriptions.Item label="发布时间">
                      {this.state.articleList.createTime}
                    </Descriptions.Item>
                    <Descriptions.Item label="数据格式">
                      {this.state.articleList.dataFormatName}
                    </Descriptions.Item>
                    <Descriptions.Item label="正文" span={2}>
                      {this.state.articleList.content}{" "}
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              </div>
              <div className={styles.fl} style={{ width: "25%" }}>
                <div className={styles.detailBodyRight}>
                  <div className={styles.detailBodyRightTop}>
                    <p className={styles.detailBodyRightTitle}>数据关联</p>
                    <div className={styles.chartBox}>
                      <Chart option={ReadingIncrement(this.state.associationMessage, 1)} onChartClick={this.onChartClick} />
                    </div>
                  </div>
                  <div className={styles.detailBodyRightBottom}>
                    <p className={styles.detailBodyRightTitle}>最新发布资源</p>
                    <div className={styles.detailBodyRightBottomList}>
                      <ul>
                        {
                          this.state.newList.map((item, index) => {
                            return (
                              <li key={index}
                                onClick={() => this.handleToDetaile(item.id)}

                              >{item.title}</li>
                            )
                          })
                        }
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.detailBottom}>
            <Button onClick={this.showModal}>授权使用</Button>
          </div>
        </div>

        {/* 点击授权弹窗 */}
        <Modal
          title="授权"
          visible={isModalVisible}
          footer={null}
          width={2000}
          style={{ top: 20 }}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div>
            <iframe width="100%" height={750}
              src={`http://21.108.153.111:9908/epm-dataCloud-v2/shopCart/base/dataApply/${serviceId}`} />

          </div>
        </Modal>
      </div>
    );
  }
}

export default DataAssetsDetail;
